@use 'sass:map';
@use './variables.scss' as *;

@function get-key($key) {
  $k: '';
  @if $key == '' {
    $k: $key;
  } @else {
    $k: '-' + $key;
  }
  @return $k;
}

// 自定义变量前缀 z
:root {
  --font-family: 'SiYuan', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

  // 主色
  @each $key, $val in $main-colors {
    --z-main-color#{ get-key($key) }: #{$val};
  }

  // 边框
  @each $key, $val in $border-colors {
    --z-border-color#{ get-key($key) }: #{$val};
  }

  // 填充
  @each $key, $val in $fill-colors {
    --z-fill-color#{ get-key($key) }: #{$val};
  }

  // 文本
  @each $key, $val in $text-colors {
    --z-text-color#{ get-key($key) }: #{$val};
  }

  // 成功
  @each $key, $val in $success-colors {
    --z-success-color#{ get-key($key) }: #{$val};
  }

  // 警告
  @each $key, $val in $warning-colors {
    --z-warning-color#{ get-key($key) }: #{$val};
  }

  // 错误
  @each $key, $val in $danger-colors {
    --z-danger-color#{ get-key($key) }: #{$val};
  }

  // 碧涛青
  @each $key, $val in $cyan-colors {
    --z-cyan-color#{ get-key($key) }: #{$val};
  }

  // 晚秋红
  @each $key, $val in $orangered-colors {
    --z-orangered-color#{ get-key($key) }: #{$val};
  }

  // 黄昏
  @each $key, $val in $gold-colors {
    --z-gold-color#{ get-key($key) }: #{$val};
  }

  // 海蔚蓝
  @each $key, $val in $blue-colors {
    --z-blue-color#{ get-key($key) }: #{$val};
  }

  // 暗夜紫
  @each $key, $val in $purple-colors {
    --z-purple-color#{ get-key($key) }: #{$val};
  }

  // 柠檬黄
  @each $key, $val in $yellow-colors {
    --z-yellow-color#{ get-key($key) }: #{$val};
  }

  // 新生绿
  @each $key, $val in $lime-colors {
    --z-lime-color#{ get-key($key) }: #{$val};
  }

  // 背景色
  --z-bg-color: var(--z-fill-color);

  // logo 背景色
  --z-logo-bg-color: #25b795;

  // 侧边宽
  --z-side-bar-width: 180px;
  // 侧边最小宽
  --z-side-bar-min-width: 48px;
  // 切换按钮大小
  --z-side-toggle-button-size: 48px;
  --z-side-toggle-button-color: var(--z-text-color);

  // 头部背景色
  --z-header-bg-color: #fff;
  // 头部导航高度
  --z-header-height: 56px;
  // 头部阴影
  --z-header-shadow: 0px 4px 12px 0px #f0f1f4;
  // 头部边框颜色
  --z-header-border-color: transparent;
  // 标签按钮高度
  --z-tags-view-height: 32px;

  // 模块颜色
  --z-module-color: var(--z-text-color-light);
  --z-module-active-color: var(--z-main-color);
  --z-module-border-color: var(--z-main-color);

  // 间距-同级元素
  --z-gap-width: 10px;

  // 内页间距
  --z-page-padding: 12px;
  //内页上内边距
  --z-page-padding-top: 8px;

  // 内页左边查询项
  --z-page-options-width: 240px;

  // 边框圆角
  --z-border-radius: 2px;
  // 边框圆角4
  --z-border-radius4: 4px;
  // 边框圆角6
  --z-border-radius6: 6px;

  // 盒子阴影
  --z-box-shadow: 0px 16px 32px 0px #e5e9ef;

  // 菜单背景渐变色
  // --z-menu-bg-linear-color: linear-gradient(180deg, #2739f2 0%, #1bcca2 100%);
  --z-menu-border-color: var(--el-border-color);
  // 菜单
  // --el-menu-border-color: transparent;
  // --el-menu-hover-border-color: transparent;
  // --el-menu-active-border-color: transparent;
  // --el-menu-active-color: var(--el-text-color-regular);
  // --el-menu-hover-text-color: var(--el-text-color-regular);

  // 滚动条
  --scroll-width: 6px;
  --scroll-height: 6px;
  --scroll-color: #eee;
  --scroll-hover-color: #ccc;
}

// dark 主题
:root.dark {
  --z-border-color: var(--el-border-color);

  // logo 背景色
  --z-logo-bg-color: #2f3149;

  // 头部背景色
  --z-header-bg-color: #121212;
  // 头部阴影
  --z-header-shadow: 0px 1px 21px 0px rgba(255, 255, 255, 0.1);

  --z-menu-border-color: var(--el-border-color);

  // 盒子阴影
  --z-box-shadow: 0px 5px 20px 0px #0f1011;

  // --z-fill-color-blank: var(--el-bg-color);
  --z-fill-color-blank: var(--el-color-primary-light-9);
}
